const app = getApp();

Page({
    data: {
        toView: "a1",
        activeId: "a1",
        // 声明一个数组, 存储右边栏各详细类目在屏幕中的高度
        category: [
            { name: "新品", id: "a1" },
            { name: "众筹", id: "a2" },
            { name: "小米手机", id: "a3" },
            { name: "redmi手机", id: "a4" },
            { name: "黑鲨游戏", id: "a5" },
            { name: "手机配件", id: "a6" },
            { name: "电视", id: "a7" },
            { name: "电脑", id: "a8" },
        ],
        content: [{
                title: "- 新品 -",
                options: [
                    { src: "../../image/redmi.jpg", id: "001", text: "redmi8" },
                    { src: "../../image/redmi.jpg", id: "002", text: "redmi8" },
                    { src: "../../image/redmi.jpg", id: "003", text: "小米9pro 5G" },
                    { src: "../../image/redmi.jpg", id: "004", text: "redmi8" },
                    { src: "../../image/redmi.jpg", id: "005", text: "redmi8" },
                    { src: "../../image/redmi.jpg", id: "001", text: "redmi8" },
                    { src: "../../image/redmi.jpg", id: "002", text: "redmi8" },
                    { src: "../../image/redmi.jpg", id: "003", text: "小米9pro 5G" },
                    { src: "../../image/redmi.jpg", id: "004", text: "redmi8" },
                    { src: "../../image/redmi.jpg", id: "005", text: "redmi8" },
                ],
                id: "a1",
            },
            {
                title: "- 众筹 -",
                options: [
                    { src: "../../image/zhongchou.jpg", id: "006", text: "redmi8" },
                    { src: "../../image/zhongchou.jpg", id: "007", text: "redmi8" },
                    { src: "../../image/zhongchou.jpg", id: "008", text: "redmi8" },
                    { src: "../../image/zhongchou.jpg", id: "009", text: "redmi8" },
                    { src: "../../image/zhongchou.jpg", id: "006", text: "redmi8" },
                    { src: "../../image/zhongchou.jpg", id: "007", text: "redmi8" },
                    { src: "../../image/zhongchou.jpg", id: "008", text: "redmi8" },
                    { src: "../../image/zhongchou.jpg", id: "009", text: "redmi8" },
                ],
                id: "a2",
            },
            {
                title: "- 小米手机 -",
                options: [
                    { src: "../../image/xiaomi.jpg", id: "006", text: "redmi8" },
                    { src: "../../image/xiaomi.jpg", id: "007", text: "redmi8" },
                    { src: "../../image/xiaomi.jpg", id: "008", text: "redmi8" },
                    { src: "../../image/xiaomi.jpg", id: "009", text: "redmi8" },
                    { src: "../../image/xiaomi.jpg", id: "006", text: "redmi8" },
                    { src: "../../image/xiaomi.jpg", id: "007", text: "redmi8" },
                    { src: "../../image/xiaomi.jpg", id: "008", text: "redmi8" },
                    { src: "../../image/xiaomi.jpg", id: "009", text: "redmi8" },
                ],
                id: "a3",
            },
            {
                title: "- redmi手机 -",
                options: [
                    { src: "../../image/hongmi.jpg", id: "006", text: "redmi8" },
                    { src: "../../image/hongmi.jpg", id: "007", text: "redmi8" },
                    { src: "../../image/hongmi.jpg", id: "008", text: "redmi8" },
                    { src: "../../image/hongmi.jpg", id: "009", text: "redmi8" },
                    { src: "../../image/hongmi.jpg", id: "006", text: "redmi8" },
                    { src: "../../image/hongmi.jpg", id: "007", text: "redmi8" },
                    { src: "../../image/hongmi.jpg", id: "008", text: "redmi8" },
                    { src: "../../image/hongmi.jpg", id: "009", text: "redmi8" },
                ],
                id: "a4",
            },
        ],
    },

    onLoad() {
        this.setData({
            toView: "a1",
            heightArr: [],
        });
        let query = wx.createSelectorQuery();
        // 获取所有.category-main类的尺寸数据
        query
            .selectAll(".category-main")
            .boundingClientRect((rect) => {
                rect.forEach((ele) => {
                    // 打印各类目高度值
                    console.log(ele.height);

                    this.calculateHeight(ele.height);
                });
            })
            .exec();
    },

    clickItem(e) {
        this.setData({
            activeId: e.currentTarget.dataset.id,
            toView: e.currentTarget.dataset.id,
        });
    },

    scroll(e) {
        let scrollHeight = e.detail.scrollTop;
        console.log(scrollHeight);

        let index = this.calculateIndex(this.data.heightArr, scrollHeight);
        this.setData({
            activeId: "a" + index,
        });
    },
    // 将各类目在屏幕中的高度存储到数组中
    calculateHeight(height) {
        // 如果数组为空, 则将第一个高度值追加到数组中
        if (!this.data.heightArr.length) {
            this.data.heightArr.push(height);
        } else {
            // 如果数组不为空, 则将数组中的高度相加获得新的高度
            this.data.heightArr.forEach((ele) => {
                height += ele;
            });
            // 将新的高度值追加到数组中
            this.data.heightArr.push(height);
        }
    },
    // 计算左边栏选中项下标
    calculateIndex(arr, scrollHeight) {
        let index = "";
        // 对各类目高度进行遍历
        for (let i = 0; i < arr.length; i++) {
            // 在数组第一项高度范围内时 设定下标为0
            if (scrollHeight >= 0 && scrollHeight < arr[0]) {
                index = 0;
                // 从数组第二项开始, 高度在数组相邻两项之间时, 设定下标为当前项的下标
            } else if (scrollHeight >= arr[i - 1] && scrollHeight < arr[i]) {
                index = i;
            }
        }
        // 返回值加1, 因为id值从1开始递增
        return index + 1;
    },
});